<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>层次选择器</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style type="text/css">
       * {margin:0; padding:0; line-height:30px;}
            body {margin:10px;}
            #menu {border:2px solid red; padding:10px;}
            a {text-decoration:none; margin-right:5px;}
            span {font-weight:bold; padding:3px;}
            h2 {margin:10px 0;}
    </style>
</head>
<body>  
    <div id="menu">
        <h2>全部游戏类型</h2>
        <dl>
        <dt>页游<span>历史</span><span>梦幻</span><span>武侠</span></dt>
        <dd>
            <a href="#">休闲棋牌</a> <a href="#">单机</a> <a href="#">街机</a>
        </dd>
        </dl>
        <dl>
            <dt>手游（电脑版）</dt>
            <dd><a href="#">角色扮演</a> <a href="#">休闲</a> <a href="#">模拟经营</a></dd>
            <dd><a href="#">动作射击</a> <a href="#">科幻</a></dd>
        </dl>
    <span>更多分类</span>
    </div> 
    <script type="text/javascript">
        $(document).ready(function() {
             $("h2").click(function(){
                // $("#menu span").css("background-color","#ccc")
                // $("#menu>span").css("background-color","#ccc")
                // $("h2+dl").css("background-color","#ccc") 
                $("h2~dl").css("background-color","#ccc") 

             })
        });
        </script>
        
</body>
</html>